<template>
  <div class="batch-booking-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="flx-row-bw">
        <div class="left-area">
          <div class="box">
            <div class="info-area">
              <div class="flx-row-bw">
                <div class="box-left-area">
                  <div class="flx-row-s-c" style="margin-bottom: 5px">
                    <h2>{{ domainInfo.domainName }}</h2>
                    <i v-if="domainInfo.isTop === 1">推荐</i>
                  </div>
                  <span>{{ domainInfo.meaning }}</span>
                </div>
                <div class="box-right-area">
                  <div class="flx-row-s-c">
                    <a
                      :href="item.href"
                      :class="{ 'mg-r-14': index < websiteList.length - 1 }"
                      v-for="(item, index) in websiteList"
                      :key="index"
                      >{{ item.name }}</a
                    >
                  </div>
                  <div class="flx-row-s-c" style="margin-top: 10px">
                    分享
                    <div class="share-icon share1"></div>
                    <div class="share-icon share2"></div>
                    <div class="share-icon share3"></div>
                  </div>
                </div>
              </div>
              <div
                style="margin-top: 7px"
                class="tips c-o"
                v-if="domainInfo.isBarrage === 1"
              >
                <span>{{ domainInfo.barrageText }}</span>
                <span class="f-button">查看玩法</span>
              </div>
            </div>
            <div class="flx-row-s-s">
              <!-- <div
                class="flx-col-s-c w-p-100 time-area"
                v-for="(item, index) in timeList"
                :key="index"
              >
                <span class="name">{{ item.name }}</span>
                <span class="time">{{ item.time }}</span>
              </div> -->
              <div class="flx-col-s-c w-p-100 time-area">
                <span class="name">剩余时间</span>
                <span class="time">{{ countDown }}</span>
              </div>
              <div class="flx-col-s-c w-p-100 time-area">
                <span class="name">当前价格</span>
                <span class="time">{{ domainInfo.price | priceFilters }}</span>
              </div>
              <div class="flx-col-s-c w-p-100 time-area">
                <span class="name">出价次数</span>
                <span class="time">{{ domainInfo.biddingCount }}</span>
              </div>
            </div>
            <div class="top-area flx-col-s-s" style="margin-bottom: 26px">
              <div class="flx-row-s-s mg-b-12">
                <span class="title">域名含义</span>
                <span class="content">{{ domainInfo.meaning }}</span>
              </div>
              <div class="flx-row-s-s mg-b-12">
                <span class="title">结束时间</span>
                <span class="content">{{ domainInfo.endTime }}</span>
              </div>
              <div class="flx-row-s-s" style="margin-bottom: 8px">
                <span class="title">加价幅度</span>
                <span class="content"
                  >{{ domainInfo.range | priceFilters
                  }}<span class="f-button" @click="markupRuleModelShow = true"
                    >查看规则</span
                  ></span
                >
              </div>
              <!-- 未结束 -->
              <div class="flx-row-s-c" v-if="!isOver">
                <span class="title">最低出价</span>
                <Input
                  v-model.trim="currentPrice"
                  placeholder=""
                  maxlength="30"
                  style="width: 80px; margin-right: 18px"
                />
                <span class="content"
                  >冻结保证金<span class="c-o">{{
                    domainInfo.bond | priceFilters
                  }}</span></span
                >
                <span class="title" style="margin-left: 90px" v-if="isLogin"
                  >可用余额</span
                >
                <span class="content" style="color: #f9521f" v-if="isLogin">{{
                  balance
                }}</span>
                <span class="content" v-else
                  >请先<span class="f-button" @click="toLogin">登录</span></span
                >
              </div>
              <!-- 已结束 -->
              <div class="flx-row-s-c" v-else>
                <span class="title">最低出价</span>
                <Input
                  v-model.trim="currentPrice"
                  disabled
                  placeholder=""
                  maxlength="30"
                  style="width: 80px; margin-right: 18px"
                />
                <span class="content"
                  >冻结保证金<span class="c-o">{{
                    domainInfo.bond | priceFilters
                  }}</span></span
                >
                <span class="title" style="margin-left: 90px" v-if="isLogin"
                  >可用余额</span
                >
                <span class="content" style="color: #f9521f" v-if="isLogin">{{
                  balance
                }}</span>
                <span class="content" v-else
                  >请先<span class="f-button" @click="toLogin">登录</span></span
                >
              </div>
              <span class="c-g" style="font-size: 12px; margin: 10px 0"
                >在上面的出价栏里输入高于当前最低出价的价格，最好是加价幅度倍数，高出部分系统自动设置为代理价。<span
                  class="f-button"
                  @click="proxyBiddingModelShow = true"
                  >什么是代理出价?</span
                ></span
              >
              <!-- 未结束 -->
              <div class="flx-col-s-c w-p-100" v-if="!isOver">
                <div class="flx-row-s-c">
                  <div class="button strong-button" @click="bidingEvent">
                    {{ bidingTitle }}
                  </div>
                  <div
                    class="button normal-button"
                    style="margin: 0 35px"
                    @click="refresh"
                  >
                    刷新当页
                  </div>
                  <div class="button special-button">手机出价</div>
                </div>
                <span class="tips c-o"
                  >温罄提醒：此域名您未提前预订，参与出价需扣除闯入费50元，无论是否得标该费用不返还</span
                >
              </div>
              <!-- 已结束 -->
              <div
                class="flx-col-s-c w-p-100"
                style="
                  background-color: #f9521f;
                  color: #fff;
                  padding: 10px 0;
                  box-sizing: border-box;
                  border-radius: 4px;
                  user-select: none;
                "
                v-else
              >
                已结束
              </div>
            </div>
            <!-- 出价记录 -->
            <h3 class="title-h3" style="margin: 0 0 15px 30px">出价记录</h3>
            <table class="table-area bidding">
              <thead>
                <tr>
                  <th>
                    <div class="line-style">竞价者号码</div>
                  </th>
                  <th>
                    <div class="line-style">当前价格</div>
                  </th>
                  <th>
                    <div class="line-style">出价时间</div>
                  </th>
                  <th>
                    <div class="line-style">状态</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  class="lc-f"
                  v-for="(item, index) in pageData.list"
                  :key="item.id"
                >
                  <td>
                    <div class="line-style">
                      <span
                        :class="[
                          'normal-f',
                          { active: index === 0 && pageData.page === 1 },
                        ]"
                        >{{ item.biddingCode }}</span
                      >
                      <span
                        class="c-o"
                        style="margin-left: 5px"
                        v-if="item.isMine"
                        >(我)</span
                      >
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <span
                        :class="[
                          'normal-f',
                          { active: index === 0 && pageData.page === 1 },
                        ]"
                        >{{ item.price | priceFilters }}</span
                      >
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <span
                        :class="[
                          'normal-f',
                          { active: index === 0 && pageData.page === 1 },
                        ]"
                        >{{ item.createdTime }}</span
                      >
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <span
                        :class="[
                          'normal-f',
                          { active: index === 0 && pageData.page === 1 },
                        ]"
                        >{{ index > 0 ? "落后" : "领先" }}</span
                      >
                    </div>
                  </td>
                </tr>
                <!-- 无数据显示 -->
                <tr v-if="pageData.total === 0" class="lc-F9FAFB nodata">
                  <td colspan="4">
                    <div class="line-style">
                      <span class="normal-f">未参与竞价，出价记录禁止查看</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- 分页组件 -->
            <div
              v-if="pageData.total > 0"
              class="flx-row-e-c"
              style="padding: 20px 25px 30px"
            >
              <Page
                :total="pageData.total"
                :current="pageData.page"
                :page-size="pageData.limit"
                :page-size-opts="pageData.pageSizeOpts"
                @on-change="pageChange"
                @on-page-size-change="pageSizeChange"
                show-elevator
                show-sizer
                show-total
              />
            </div>
          </div>
        </div>
        <!-- 即将结束 -->
        <div class="right-area">
          <h3 class="title-h3" style="margin: 20px 19px 13px">即将结束</h3>
          <table class="table-area bidding-table-area">
            <tbody>
              <template v-for="item in domainOverList">
                <Tooltip
                  class="bidding-tips"
                  :content="item.barrageText"
                  placement="top"
                  :key="item.biddingId"
                  :disabled="item.barrageText == ''"
                >
                  <tr class="lc-f">
                    <td>
                      <div class="line-style">
                        <span class="normal-f f-ell-sin" title="">{{
                          item.domainName
                        }}</span>
                      </div>
                    </td>
                    <td>
                      <div class="line-style">
                        <span class="money normal-f f-ell-sin">{{
                          item.price
                        }}</span>
                      </div>
                    </td>
                    <td>
                      <div class="line-style">
                        <span class="normal-f">{{ item.endTimeStr }}</span>
                      </div>
                    </td>
                    <td>
                      <div class="line-style">
                        <div
                          class="button button-size"
                          @click="gotoBiddingDetail(item.biddingId)"
                        >
                          截胡
                        </div>
                      </div>
                    </td>
                  </tr>
                </Tooltip>
                <!-- <div v-else :key="item.biddingId">
                  <tr class="lc-f" >
                    <td>
                      <div class="line-style">
                        <span class="normal-f f-ell-sin" title="">{{
                          item.domainName
                        }}</span>
                      </div>
                    </td>
                    <td>
                      <div class="line-style">
                        <span class="money normal-f f-ell-sin">{{
                          item.price
                        }}</span>
                      </div>
                    </td>
                    <td>
                      <div class="line-style">
                        <span class="normal-f">{{ item.endTimeStr }}</span>
                      </div>
                    </td>
                    <td>
                      <div class="line-style">
                        <div
                          class="button button-size"
                          @click="gotoBiddingDetail(item.biddingId)"
                        >
                          截胡
                        </div>
                      </div>
                    </td>
                  </tr>
                </div> -->
              </template>
            </tbody>
          </table>
        </div>
      </div>
      <div class="bottom-area">
        <h3 class="title-h3" style="margin-left: 0">抢注竞价须知</h3>
        <p v-for="(item, index) in tips" :key="index">{{ item }}</p>
      </div>
    </div>
    <commonModal
      :show.sync="showBidding"
      :loading.sync="showLoading"
      @confirmEvent="accidentConfirmEvent"
      @cancelEvent="cancelEvent"
    >
      <template #content>
        <p class="align-center">
          此域名您未提前预订，如出价需要扣除闯入费<i
            style="color: #fc461e; font-style: normal"
            >50</i
          >元
        </p>
        <p class="align-center">无论是否得标该费用不返还，确定闯入吗？</p>
      </template>
    </commonModal>
    <commonModal
      :content="title"
      :show.sync="showBidding2"
      :loading.sync="showLoading"
      @confirmEvent="accidentConfirmEvent"
      @cancelEvent="cancelEvent"
    >
    </commonModal>
    <rule-modal
      :show.sync="markupRuleModelShow"
      :content="markupRuleContent"
      :title="markupRuleTitle"
    ></rule-modal>
    <rule-modal
      :show.sync="proxyBiddingModelShow"
      :content="proxyBiddingContent"
      :title="proxyBiddingTitle"
    ></rule-modal>
  </div>
</template>

<script>
import {
  getBiddingFinishing,
  getBiddingInfoById,
  getBiddingRecords,
  postBidding,
} from "@/api/bidding";
import { unixTimestampFormatTime, timeFormat } from "@/utils/format";
import token from "@/utils/token";
import axios from "axios";
const bottomInfoUrl =
  process.env.NODE_ENV === "development"
    ? config2.bottomInfoUrl.dev
    : config2.bottomInfoUrl.pro;
const webScoketUrl =
  process.env.NODE_ENV === "development"
    ? config2.webScoketUrl.dev
    : config2.webScoketUrl.pro;
const toLoginUrl =
  process.env.NODE_ENV === "development"
    ? config2.toLoginUrl.dev
    : config2.toLoginUrl.pro;
import commonModal from "_c/modal/commonModal/index";

export default {
  name: "VipBiddingDetail",
  components: {
    commonModal,
    ruleModal: () => import("_c/modal/ruleModal/ruleModal.vue"),
  },
  data() {
    return {
      markupRuleModelShow: false,
      markupRuleContent: "",
      markupRuleTitle: "",
      proxyBiddingModelShow: false,
      proxyBiddingContent: "",
      proxyBiddingTitle: "",
      breadCrumb: [
        { name: "域名竞价", to: "/dnbidding" },
        { name: "竞价详情", to: "/biddingdetail" },
      ],
      tips: [
        "1、竞价时间：域名竞价开始时间为抢注成功当天9:00，结束时间为第三天晚上21至22点。若结束前5分钟内有新出价，竞价自动延时至5分钟。合作平台域名竞价时间以平台显示为准。",
        "2、闯入出价：欲参与非预订域名的竞价则需额外支付闯入款：50元，闯入费直接扣除，无论是否得标均不予退还，出价领先时还需要冻结出价保证金。出局时只解冻出价保证金。",
        "3、代理出价：当您的实际出价大于当时所需最低出价时，系统便会自动帮您设置成代理价。当其他出价者出价低于您设置的代理价时，系统自动帮您出价，出价会高于其它用户出价一个阶梯，您仍然保持领先，直到您的代理价被超出；若无人出价，则以当前价得标。",
        "4、保证金：出价领先时，将根据出价金额冻结相应的保证金，50万以下冻结20%，50万-100万(不含)冻结10%，100万-300万(不含)冻结5%，300万-500万(不含)冻结2%，500万及以上冻结1%，最低价格为预订冻结价格，“出局”时解冻。",
        "5、加价幅度：点此查看详细规则。",
        "6、付款周期：域名竞价得标用户，须在3天内对该域名付款。3天内未付款将作为违约处理，扣除竞价保证金。违约后将无法预订和竞价域名。",
        "7、域名交割：DELETE类型国内域名得标付款成功后将在7-15个工作日交割；DELETE类型的国际域名得标付款后，可以在注册满60天后获取转移密码或直接转入；YMC_PreRelease类型的国内域名得标付款成功后将在8-10天（自然日）完成交割；YMC_PreRelease类型的国际域名得标付款成功后将在22-24天（自然日）完成交割；以上时间均为常规交割时间，仅供参考，具体交割时间请以实际交割时间为准。",
        "8、汇率说明：涉及到币种转换的竞价域名，均按照当天汇率计算，多退少补。",
        "9、保留价：部分合作平台域名存在保留价，未达到保留价即使领先状态也无法得标，请留意页面提示；若志在得标域名，请继续出价，直到页面提示“当前已达到保留价”。",
        "10、落后提醒：在您开启落后提醒并参与的竞价时，域名即将结拍时将会以短信的形式通知您。",
        "11、其他：由于国际网络不稳定或发生故障等不可抗力导致竞价失败的，本平台会全额退款。",
        "12、竞价得标的域名请不要用于制作钓鱼诈骗色情等非法网站，发现一律封锁域名，封锁帐户，费用不退，并且将违法帐户信息上报公安部门，后果自负，谢谢合作！",
      ],
      currentPrice: 0,
      websiteList: [
        {
          name: "SEO信息",
          href: "#",
        },
        {
          name: "whois",
          href: "#",
        },
        {
          name: "百度",
          href: "#",
        },
        {
          name: "爱站",
          href: "#",
        },
        {
          name: "谷歌",
          href: "#",
        },
      ],
      timeList: [
        {
          name: "剩余时间",
          time: "",
        },
        {
          name: "当前价格",
          time: "",
        },
        {
          name: "出价次数",
          time: "",
        },
      ],
      // 域名详情
      domainInfo: {},
      // 即将结束数据
      domainOverList: [],
      // 出价记录
      pageData: {
        list: [],
        pageSizeOpts: [10, 15, 20],
        total: 0,
        page: 1,
        limit: 10,
      },
      // 出价弹出层
      showBidding: false,
      // 开启loading
      showLoading: false,
      // 打开竞价弹出层
      showBidding2: false,
      title: "",
      // 是否登录
      isLogin: false,
      // 倒计时
      countDown: "",
    };
  },
  filters: {
    priceFilters(val) {
      return val ? "￥" + val : "";
    },
    timeFilters(val) {
      return val
        ? unixTimestampFormatTime(new Date(val).getTime(), "HH小时mm分")
        : "";
    },
  },
  watch: {
    "domainInfo.price": {
      handler() {
        if (this.domainInfo.biddingCount > 0) {
          this.currentPrice =
            this.domainInfo.price + this.domainInfo.range || 0;
        } else {
          this.currentPrice = this.domainInfo.price || 0;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    balance() {
      return this.$store.state.user.balance;
    },
    bidingTitle() {
      return this.domainInfo.isBidding === 1 ? "竞价" : "闯入竞价";
    },
    isOver() {
      return this.$moment(this.domainInfo.endTime).diff(this.$moment()) < 0;
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.page = 1;
    this.limit = 50;
    this.requestBiddingInfo();
    this.requestBiddingFinishing();
    this.getRule();
    // 判断是否登录
    if (token.get()) {
      this.isLogin = true;
      this.requestBiddingRecords();
    }
  },
  methods: {
    // 获取协议
    getRule() {
      axios(`${bottomInfoUrl}/markupRules.json`).then((res) => {
        if (res != null && res.data != null) {
          this.markupRuleTitle = res.data.title;
          this.markupRuleContent = res.data.content;
        }
      });
      axios(`${bottomInfoUrl}/proxyBidding.json`).then((res) => {
        if (res != null && res.data != null) {
          this.proxyBiddingTitle = res.data.title;
          this.proxyBiddingContent = res.data.content;
        }
      });
    },
    // 获取即将结束域名
    async requestBiddingFinishing() {
      const { code, data } = await getBiddingFinishing({ limit: 20 });
      if (code === 200 && data.length > 0) {
        this.domainOverList = data;
        this.startTime();
      }
    },
    // 获取竞价域名详情
    async requestBiddingInfo() {
      const { code, data } = await getBiddingInfoById(this.id);
      if (code === 200 && data) {
        this.domainInfo = data;
        // let tempCountDown = this.$moment("2021-07-04 12:43:33");
        this.tempCountDown = this.$moment(this.domainInfo.endTime);
        let currentTime = this.$moment();
        let duration = this.tempCountDown.diff(currentTime);
        duration <= 0 && (this.countDown = "已结束");
        if (duration > 0) {
          this.countDown = timeFormat({
            val: duration,
            format: "DD天HH时mm分ss秒",
            isSubstitute: true,
          });
          if (!this.countDownInterval) {
            this.countDownInterval = setInterval(() => {
              duration = this.tempCountDown.diff(this.$moment());
              // 定时结束停止定时任务
              if (duration <= 0) {
                this.countDown = "已结束";
                clearInterval(this.countDownInterval);
                return;
              }
              this.countDown = timeFormat({
                val: duration,
                format: "DD天HH时mm分ss秒",
                isSubstitute: true,
              });
            }, 1000);
          }
        }
        token.get() && this.startSocket();
      }
    },
    // 获取出价记录
    async requestBiddingRecords() {
      const { code, data } = await getBiddingRecords({
        biddingId: this.id,
        page: this.pageData.page,
        limit: this.pageData.limit,
      });
      if (code === 200 && data) {
        if (data.list) {
          this.pageData.list = data.list;
          this.pageData.total = data.total;
        }
      }
    },
    forEachData(isCount) {
      this.domainOverList = this.domainOverList.map((o) => {
        let endTimeStr = "已结束",
          tempCountDown = this.$moment(o.endTime),
          currentTime = this.$moment();
        let duration = tempCountDown.diff(currentTime);
        if (duration <= 0) {
          isCount && (this.length -= 1);
          endTimeStr = "已结束";
        } else {
          endTimeStr =
            timeFormat({
              val: duration,
              format: "DD天HH时mm分ss秒",
              isSubstitute: true,
            }) === ""
              ? "已结束"
              : timeFormat({
                  val: duration,
                  format: "DD天HH时mm分ss秒",
                  isSubstitute: true,
                });
        }
        return { ...o, endTimeStr };
      });
    },
    // 即将结束开启定时器
    startTime() {
      let total = 5;
      if (this.interval) {
        clearInterval(this.interval);
      }
      // 判断是否有竞价未结束的域名
      let progressList = this.filter(this.domainOverList, (o) => {
        return new Date(o.endTime).getTime() > this.$moment();
      });
      // 开启定时器
      this.forEachData();
      if (progressList.length > 0) {
        this.length = progressList.length;
        this.interval = setInterval(() => {
          if (total === 0) {
            total = 5;
            let progressList = this.filter(this.domainOverList, (o) => {
              return new Date(o.endTime).getTime() > this.$moment();
            });
            this.length = progressList.length;
          }
          if (this.length === 0) {
            // 所有竞价结束关闭定时器
            clearInterval(this.interval);
          }
          this.forEachData(true);
          total -= 1;
        }, 1000);
      }
    },
    // webScoket发送消息
    sendMessage(txt) {
      this.webSocket.send(txt);
    },
    // webScoket异常重连
    resetConnect() {
      this.connectCount = this.connectCount || 0;
      if (!this.webSocketInterval) {
        console.log("开始webSocket重连");
        this.webSocketResetInterval = setInterval(() => {
          this.connectCount += 1;
          if (this.connectCount <= 5) {
            this.startSocket();
            this.webSocketResetInterval &&
              clearInterval(this.webSocketResetInterval);
          }
        }, 1000);
      }
    },
    // 开启webScoket
    startSocket() {
      this.messageTotal = 0;
      this.webSocket = new WebSocket(
        `${webScoketUrl}/web/webSocket/domain/${this.id}/${token.get()}`
      );
      // 接收消息事件
      this.webSocket.onmessage = (e) => {
        if (e.data === "open:suc") {
          this.sendMessage("start");
          this.heartInterval = setInterval(() => {
            if (this.messageTotal === 10) {
              this.sendMessage("heart");
              this.messageTotal = 0;
            }
            this.messageTotal += 1;
          }, 1000);
        }
        if (e.data.indexOf("msg:") != -1) {
          let message = e.data.split("msg:")[1];
          this.messageTotal = 0;
          let info = JSON.parse(message);
          this.domainInfo.biddingCount = info.biddingCount;
          this.domainInfo.price = info.price;
          this.domainInfo.endTime =
            typeof info.endTime === "number"
              ? this.$moment(info.endTime).format("yyyy-MM-DD HH:mm:ss")
              : info.endTime;
          this.tempCountDown = this.$moment(this.domainInfo.endTime);
          // this.domainInfo.range = info.range;
          // this.domainInfo.bond = info.bond;
          // this.domainInfo.isBidding = info.isBidding;
        }
        if (e.data.indexOf("rec:stop") != -1) {
          this.webSocket.close();
        }
      };
      // 关闭事件
      // this.webSocket.onclose = () => {
      //   this.resetConnect();
      // };
      // 连接失败事件
      this.webSocket.onerror = () => {
        this.resetConnect();
      };
    },
    // 刷新当页事件
    refresh() {
      window.location.reload();
    },
    // 竞价事件
    bidingEvent() {
      // 没登录去登录
      if (!token.get()) {
        this.$storage.setToLoginRoute(window.location.href);
        this.toLogin();
        return false;
      }
      if (this.domainInfo.isBidding === 0) {
        // 没有参与竞价打开闯入弹出框
        this.showBidding = true;
        this.title =
          "此域名您未提前预订，如出价需要扣除闯入费50元，无论是否得标该费用不返还，确定闯入吗？";
      } else {
        let pricre = 0;
        if (this.domainInfo.biddingCount > 0) {
          pricre = this.domainInfo.price + this.domainInfo.range || 0;
        } else {
          pricre = this.domainInfo.price || 0;
        }

        // 打开竞价弹出框
        this.showBidding2 = true;
        this.title = `是否确定出价${pricre}元？`;
      }
    },
    // 闯入出价事件
    async accidentConfirmEvent() {
      let minPrice = this.domainInfo.price + this.domainInfo.range;
      if (this.domainInfo.biddingCount > 0) {
        minPrice = this.domainInfo.price + this.domainInfo.range;
      } else {
        minPrice = this.domainInfo.price;
      }
      let price = this.currentPrice;
      if (price < this.domainInfo.price) {
        this.$Message.warning(`最低出价${minPrice}元`);
      }
      // 判断余额是否足够
      // if (parseFloat(this.balance) < price) {
      //   this.$Message.warning("余额不足！");
      // }
      const { code, data } = await postBidding({
        biddingId: this.id,
        price,
      });
      this.showLoading = false;
      this.domainInfo.isBidding === 0
        ? (this.showBidding = false)
        : (this.showBidding2 = false);
      if (code === 200) {
        this.$Message.success("操作成功!");
        this.requestBiddingRecords();
        this.domainInfo.isBidding = 1;
      } else {
        this.$Message.warning(data);
      }
    },
    // 闯入取消出价
    cancelEvent() {
      if (this.domainInfo.isBidding === 0) this.showBidding = false;
      else this.showBidding2 = false;
    },
    // 去登录
    toLogin() {
      window.location.href = toLoginUrl;
    },
    // 切换页码
    pageChange(page) {
      this.pageData.page = page;
      this.requestBiddingRecords();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageData.limit = pageSize;
      this.pageChange(1);
    },
    gotoBiddingDetail(id) {
      this.$router.push({
        name: "biddingdetail",
        query: {
          id: id,
        },
      });
      window.location.reload();
    },
  },
  beforeDestroy() {
    this.sendMessage("stop");
    //销毁定时器
    this.interval && clearInterval(this.interval);
    this.heartInterval && clearInterval(this.heartInterval);
    this.countDownInterval && clearInterval(this.countDownInterval);
    this.webSocketResetInterval && clearInterval(this.webSocketResetInterval);
  },
};
</script>

<style lang="scss" scoped>
.batch-booking-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .left-area {
    width: 750px;
    .box {
      background: #ffffff;
      border: 1px solid #eaeaea;

      .info-area {
        padding: 20px 30px;

        .box-left-area {
          h2 {
            font-size: 20px;
            color: #3d3d3d;
            word-break: break-all;
          }
          i {
            display: inline-block;
            @include size(40px, 20px);
            margin-left: 20px;
            background-color: #f9521f;
            border-radius: 4px;
            color: #fff;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
            font-style: normal;
            flex-shrink: 0;
          }
          span {
            color: rgba($color: #3d3d3d, $alpha: 0.8);
            font-size: 14px;
          }
        }
        .box-right-area {
          color: #3d3d3d;
          flex-shrink: 0;
          margin-left: 15px;
          a {
            font-size: 14px;
            @include h-c(null, null, #3d3d3d, #f9521f);
            flex-shrink: 0;
            line-height: 30px;
          }
          .mg-r-14 {
            margin-right: 14px;
          }
          .share-icon {
            margin-left: 10px;
            @include size(20px);
            @include bg-setting;
          }
          .share1 {
            background-image: url("~@/assets/images/share1@2x.png");
          }
          .share2 {
            background-image: url("~@/assets/images/share2@2x.png");
          }
          .share3 {
            background-image: url("~@/assets/images/share3@2x.png");
          }
        }
        .tips {
          height: 16px;
          padding-left: 18px;
          @include bg-setting("tips", contain, left);
          line-height: 16px;
          font-size: 12px;
        }
      }

      .time-area {
        padding: 15px;
        background-color: #feede8;
        .name {
          font-style: 14px;
          font-weight: 600;
          margin-bottom: 6px;
          color: #3d3d3d;
          flex-shrink: 0;
        }
        .time {
          color: #f9521f;
          font-size: 18px;
          flex-shrink: 0;
        }
      }

      .top-area {
        padding: 20px 30px 27px;
        border-bottom: #f5f5f5 solid 1px;
        font-size: 14px;

        .mg-b-12 {
          margin-bottom: 12px;
        }
        .title {
          color: #3d3d3d;
          font-weight: 600;
          margin-right: 14px;
          flex-shrink: 0;
          &::after {
            content: ":";
          }
        }
        .content {
          color: rgba($color: #3d3d3d, $alpha: 0.9);
          word-break: break-all;
        }
        .button {
          @include size(120px, 40px);
          @include btn-s(null, 40px, 4px);
        }
        .strong-button {
          @include h-c(#f9521f, rgba(249, 82, 31, 0.8), #fff);
        }
        .normal-button {
          @include h-c(#fee5de, null, #f9521f);
          transition: border-color 0.3s;
          border: transparent solid 1px;
          &:hover {
            border-color: #f9521f;
          }
        }
        .special-button {
          @include bg-setting("button");
          color: #f9521f;
        }
        .tips {
          height: 16px;
          padding-left: 24px;
          @include bg-setting("tips2", contain, left);
          line-height: 16px;
          font-size: 12px;
          margin-top: 18px;
        }
      }
      .f-button {
        color: #1c9cdf;
        margin-left: 8px;
        cursor: pointer;
      }
    }
  }
  .right-area {
    width: 435px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    .button-size {
      @include size(60px, 26px);
      font-size: 12px;
      line-height: 26px;
    }

    .money {
      font-size: 16px;
      color: #f9521f;
      font-weight: 600;
      &::before {
        content: "￥";
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  .bottom-area {
    margin-top: 15px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #eaeaea;
    padding: 20px 30px;

    p {
      font-size: 14px;
      color: rgba($color: #3d3d3d, $alpha: 0.8);
      line-height: 1.5;
      word-break: break-all;
      margin-top: 18px;
      transition: color 0.3s;
      &:hover {
        color: #f9521f;
      }
    }
  }
}
.bidding tbody {
  .nodata {
    height: 80px;
  }
}
.bidding /deep/ {
  tr {
    .active {
      color: #f9521f;
    }
  }
}
.bidding-table-area /deep/ {
  .ivu-tooltip {
    width: 100%;
    display: block;
    overflow: hidden;
    .ivu-tooltip-rel {
      width: 100%;
      display: block;
      .lc-f {
        table-layout: auto;
        display: flex;
        width: 100%;
        justify-content: space-between;
        overflow: hidden;
        td {
          &:first-child {
            flex: 1 0 120px;
            max-width: 150px;
          }
          &:nth-child(2) {
            flex: 0 0 100px;
            max-width: 100px;
            .money {
              max-width: 100px;
            }
          }
          &:nth-child(3) {
            flex: 0 0 130px;
          }
          &:last-child {
            max-width: 80px;
          }
          box-sizing: border-box;
        }
      }
    }
  }
  .ivu-tooltip-inner {
    max-width: 350px;
    width: 350px;
    white-space: normal;
  }
}
</style>
